<template>
  <div id="StaffIndex">
    <!-- 查询条件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="姓名/编号"
          v-model="queryParam.name"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="电话"
          v-model="queryParam.tellNumber"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-button
          @click="getTableData()"
          type="primary"
          icon="el-icon-search"
          plain
          >查询</el-button
        >
        <el-button
          @click="queryParamClean"
          type="warning"
          icon="el-icon-refresh"
          plain
          >清空</el-button
        >
      </el-col>
    </el-row>
    <!-- 业务操作按钮组 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-button
          @click="dialog.addOrEdit = true"
          type="success"
          icon="el-icon-circle-plus-outline"
          plain
          >添加管理员</el-button
        >
        <el-button @click="moreDelete" type="danger" icon="el-icon-delete" plain
          >批量删除</el-button
        >
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="tableSelectChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="code" label="编号" width="250">
          </el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" width="90" label="性别">
            <template slot-scope="scope">
              <!-- scope.row 得到的是当前行的数据 -->
              <el-tag v-if="scope.row.sex == 1" type="success">男</el-tag>
              <el-tag v-else type="danger">女</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="accountID" width="90" label="账号授权">
            <template slot-scope="scope">
              <!-- scope.row 得到的是当前行的数据 -->
              <el-tag v-if="scope.row.accountID != null" type="success">{{ scope.row.accountName }}</el-tag>
              <el-tag v-else type="danger">未授权</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tellNumber" label="手机号码"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="220"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="toShow(scope.row.staffID)"
                plain
                title="查看"
                size="mini"
                icon="el-icon-search"
              ></el-button>
              <el-button
                @click="toEdit(scope.row.staffID)"
                plain
                type="warning"
                size="mini"
                title="修改"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="toDelete(scope.row.staffID)"
                plain
                type="danger"
                size="mini"
                title="删除"
                icon="el-icon-delete"
              ></el-button>
              <el-dropdown @command="moreMenuSelect">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="'sqAccount:' + scope.row.staffID"
                    >授权账号</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页工具 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParam.page"
          :page-sizes="[10, 30, 60, 100]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 新增\修改用户信息弹窗 -->
    <el-dialog
      :title="(isEdit == true ? '编辑' : '新增') + '管理员'"
      :visible.sync="dialog.addOrEdit"
      :close-on-click-modal="false"
      :show-close="false"
      width="60%"
      :destroy-on-close="true"
    >
      <el-form
        ref="addOrEditForm"
        :rules="formRules"
        :model="addOrEditFormData"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="addOrEditFormData.name"
                placeholder="请填写姓名"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <gd_param
                v-model="addOrEditFormData.sex"
                placeholder="请选择性别"
                type="select"
                paramCode="sexCode"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input
                type="number"
                v-model="addOrEditFormData.age"
                placeholder="请输入年龄"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="addOrEditFormData.birthday"
                type="date"
                placeholder="请选择生日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                v-model="addOrEditFormData.idCard"
                placeholder="请填写身份证号"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="tellNumber">
              <el-input
                v-model="addOrEditFormData.tellNumber"
                placeholder="请填写手机号码"
                maxlength="20"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="邮箱" prop="emailAddress">
          <el-input
            v-model="addOrEditFormData.emailAddress"
            placeholder="请填写邮箱"
            maxlength="35"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <el-input
            type="textarea"
            placeholder="请输入详细居住位置"
            v-model="addOrEditFormData.address"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="locations">
          <el-input
            v-model="addOrEditFormData.locations"
            placeholder="请填写籍贯，如：云南昆明石林"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="员工头像" prop="staffPhotoFileID">
          <gd_file v-if="isEdit == false" @uploadSuccess="staffPhotoUpload" />
          <gd_file
            v-else
            :fileID="addOrEditFormData.staffPhotoFileID"
            @uploadSuccess="staffPhotoUpload"
          />
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input
            type="textarea"
            placeholder="如有备注请输入描述"
            v-model="addOrEditFormData.comment"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="formClose">关闭</el-button>
          <el-button type="warning" plain @click="formRest">重置</el-button>
          <el-button type="primary" @click="doSaveAccount">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看弹窗组件 -->
    <el-dialog
      title="管理员详情"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :show-close="false"
      width="70%"
    >
      <el-descriptions :title="showData.name" :column="3" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="closeShowData"
            >关闭</el-button
          >
        </template>
        <el-descriptions-item label="编号">
          {{ showData.code }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ showData.name }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名拼音">
          {{ showData.namePingYing }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ showData.sex == 1 ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{ showData.age }}
        </el-descriptions-item>
        <el-descriptions-item label="生日">
          {{ showData.birthday }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          {{ showData.idCard }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号码">
          {{ showData.tellNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱地址">
          {{ showData.emailAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="居住地址">
          {{ showData.address }}
        </el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-image
            style="width: 100px; height: 100px"
            :src="showData.staffPhotoFileThURL"
            :preview-src-list="[showData.staffPhotoFileThURL]"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="关联账号">
          {{ showData.accountName }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ showData.comment }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 授权账号弹窗 -->
    <el-drawer
      title="授权账号"
      :visible.sync="dialog.grante"
      direction="rtl"
      :close-on-click-modal="false"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
    >
      <div class="div1">
        <el-table :data="granteAccountList" style="width: 100%" highlight-current-row @current-change="granteAccountChange">
          <el-table-column prop="userName" label="账户名" ></el-table-column>
          <el-table-column prop="state" label="状态" >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.state==1" size="medium">正常</el-tag>
                <el-tag v-else size="medium" type="warning">锁定</el-tag>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="div2">
        <el-button plain @click="closeGrante">关闭</el-button>
        <el-button type="primary" @click="doGranteAccount">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import * as axiosAPI from "@/api/staff.js";
import * as axiosAccount from "@/api/account.js";

import gd_param from "@/components/mycomponents/gd_param.vue";
import gd_file from "@/components/mycomponents/gd_file.vue";
export default {
  name: "StaffIndex",
  components: { gd_param, gd_file },
  data() {
    return {
      // 是否是修改
      isEdit: false,
      // 页面中弹窗状态
      dialog: {
        addOrEdit: false,
        show: false,
        grante: false
      },
      // 查询参数
      queryParam: {
        name: null,
        tellNumber: null
      },
      // 数据添加时表单信息
      addOrEditFormData: {
        staffID: null,
        code: null,
        name: null,
        namePingYing: null,
        sex: null,
        age: null,
        birthday: null,
        idCard: null,
        tellNumber: null,
        emailAddress: null,
        address: null,
        locations: null,
        staffPhotoFileID: null,
        staffPhotoFileThURL: null,
        accountID: null,
        comment: null
      },
      // 查看时详情数据
      showData: {
        staffID: null,
        code: null,
        name: null,
        namePingYing: null,
        sex: null,
        age: null,
        birthday: null,
        idCard: null,
        tellNumber: null,
        emailAddress: null,
        address: null,
        locations: null,
        staffPhotoFileID: null,
        staffPhotoFileThURL: null,
        accountID: null,
        comment: null
      },
      // 用户新增表单提交验证规则
      formRules: {
        name: { required: true, message: "请输入姓名", trigger: "blur" },
        sex: { required: true, message: "请选择性别", trigger: "change" },
        age: { required: true, message: "请输入年龄", trigger: "blur" },
        tellNumber: {
          required: true,
          message: "请输入电话号码",
          trigger: "blur"
        },
        emailAddress: {
          required: true,
          message: "请输入邮箱地址",
          trigger: "blur"
        },
        staffPhotoFileID: {
          required: true,
          message: "请上传用户头像",
          trigger: "blur"
        }
      },
      // 当前表格选中的数据
      nowTableSelectedList: [],
      // 分页参数
      pageParam: {
        size: 10, // 每页显示的行数
        page: 1, // 当前访问的页码
        total: 0 // 总条目数
      },

      tableData: [],
      granteAccountList: [], // 可授权账号列表
      granteParam: {
        // 授权查询条件
        userName: null
      },
      doGranteData: {
        // 授权表单信息
        staffID: null,
        accountID: null,
        accountName: null
      }
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 查询数据表格
    getTableData() {
      let _this = this;
      axiosAPI.pages(_this.queryParam, _this.pageParam).then(function(res) {
        if (res.code == "0000") {
          _this.tableData = res.data.rows;
          _this.pageParam.page = res.data.page;
          _this.pageParam.total = res.data.total;
          _this.pageParam.size = res.data.pageSize;
        }
      });
    },
    // 清空查询条件
    queryParamClean() {
      this.queryParam = {
        userName: null,
        acEmail: null
      };

      this.getTableData();
    },
    // 当每页显示的行数切换
    handleSizeChange(data) {
      this.pageParam.size = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 切换页码时
    handleCurrentChange(data) {
      this.pageParam.page = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 关闭新增用户弹窗
    formClose() {
      this.dialog.addOrEdit = false;
      this.addOrEditFormData = {
        staffID: null,
        code: null,
        name: null,
        namePingYing: null,
        sex: null,
        age: null,
        birthday: null,
        idCard: null,
        tellNumber: null,
        emailAddress: null,
        address: null,
        locations: null,
        staffPhotoFileID: null,
        staffPhotoFileThURL: null,
        accountID: null,
        comment: null
      };
      this.isEdit = false;
    },
    // 关闭详情查看弹窗
    closeShowData() {
      this.showData = {
        staffID: null,
        code: null,
        name: null,
        namePingYing: null,
        sex: null,
        age: null,
        birthday: null,
        idCard: null,
        tellNumber: null,
        emailAddress: null,
        address: null,
        locations: null,
        staffPhotoFileID: null,
        staffPhotoFileThURL: null,
        accountID: null,
        comment: null
      };

      this.dialog.show = false;
    },
    // 重置新增用户表单
    formRest() {
      this.addOrEditFormData = {
        staffID: null,
        code: null,
        name: null,
        namePingYing: null,
        sex: null,
        age: null,
        birthday: null,
        idCard: null,
        tellNumber: null,
        emailAddress: null,
        address: null,
        locations: null,
        staffPhotoFileID: null,
        staffPhotoFileThURL: null,
        accountID: null,
        comment: null
      };
    },
    // 提交新增表单
    doSaveAccount() {
      // 进行表单验证
      this.$refs.addOrEditForm.validate(valid => {
        if (valid) {
          this.submitAddOrEdit();
        } else {
          return false;
        }
      });
    },
    // 提交表单axios
    submitAddOrEdit() {
      if (this.isEdit) {
        // 编辑
        let _this = this;
        axiosAPI.update(_this.addOrEditFormData).then(function(res) {
          if (res.code == "0000") {
            _this.formClose();
            _this.getTableData();
          }
        });
      } else {
        // 新增
        let _this = this;
        axiosAPI.add(_this.addOrEditFormData).then(function(res) {
          if (res.code == "0000") {
            _this.formClose();
            _this.getTableData();
          }
        });
      }
    },
    // 提交删除axios
    submitDelete(pkID) {
      let _this = this;
      axiosAPI.deletes(pkID).then(function(res) {
        if (res.code == "0000") {
          _this.getTableData();
        }
      });
    },
    // 操作栏-编辑
    toEdit(pkID) {
      // 1. 后端查询当前行的数据进行更新（不要拿前端的数据更新）

      let _this = this;
      axiosAPI.getByID(pkID).then(function(res) {
        if (res.code == "0000") {
          // 2. 赋值给修改表单数据
          _this.addOrEditFormData = res.data;
        }
      });

      // 3. 告诉弹窗现在是修改时间
      this.isEdit = true;

      // 4. 打开修改弹窗
      this.dialog.addOrEdit = true;
    },
    // 操作栏-查看
    toShow(pkID) {
      let _this = this;
      axiosAPI.getByID(pkID).then(function(res) {
        if (res.code == "0000") {
          // 2. 赋值给修改表单数据
          _this.showData = res.data;
        }
      });

      this.dialog.show = true;
    },
    // 操作栏-单行删除
    toDelete(pkID) {
      // 当点击删除时提示询问是否进行删除
      this.$confirm("是否确定要删除该账号信息?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 当点击确定时

          // 调用删除方法进行删除
          this.submitDelete(pkID);
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 触发批量删除操作
    moreDelete() {
      // 1. 判断表格是否选中数据
      if (this.nowTableSelectedList.length <= 0) {
        this.$message.warning("请至少选择一行数据再操作！");
        return;
      }

      // 2. 问询
      this.$confirm(
        "确定要删除这【" + this.nowTableSelectedList.length + "】行数据吗?",
        "删除提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 当点击确定时

          let ids = "";

          for (var i in this.nowTableSelectedList) {
            ids += this.nowTableSelectedList[i].staffID + ",";
          }

          // 调用删除方法进行删除
          this.submitDelete(ids.substring(0, ids.length - 1));
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 当表格复选框选中变化时触发
    tableSelectChange(data) {
      this.nowTableSelectedList = data;
    },
    // 菜单栏-点击更多操作项目触发回调
    moreMenuSelect(cm) {
      // 参数效果： unlock:主键
      // 1. 拆分指令
      let arr = cm.split(":");
      let methodName = arr[0];
      let pkID = arr[1];

      if (methodName == "sqAccount") {
        // 授权用户
        this.rowToGrante(pkID);
      } else if (methodName == "unLock") {
      }
    },
    // 头像文件上传成功
    staffPhotoUpload(data) {
      if (data.length > 0) {
        this.addOrEditFormData.staffPhotoFileID = data[0].id;
        this.addOrEditFormData.staffPhotoFileThURL = data[0].url;
      } else {
        this.addOrEditFormData.staffPhotoFileID = null;
        this.addOrEditFormData.staffPhotoFileThURL = null;
      }
    },
    // 查询可授权账号
    getCanGranteAccountList() {
      let _this = this;
      axiosAccount
        .getNotGranteStaffAccountList(_this.granteParam)
        .then(function(res) {
          if (res.code == "0000") {
            _this.granteAccountList = res.data;
          }
        });
    },
    // 进行授权
    doGranteAccount() {
      let _this = this;
      axiosAPI.granteStaffAccount(this.doGranteData).then(function(res) {
        if (res.code == "0000") {
          _this.closeGrante();
        }
      });
    },
    // 打开授权窗体
    rowToGrante(staffID) {
      this.getCanGranteAccountList();
      this.doGranteData.staffID = staffID;
      this.dialog.grante = true;
    },
    // 关闭授权窗体
    closeGrante() {
      this.doGranteData = {
        staffID: null,
        accountID: null,
        accountName: null
      };
      this.dialog.grante = false;
    },
    // 授权用户选择
    granteAccountChange(data){
      this.doGranteData.accountID = data.accountID;
      this.doGranteData.accountName = data.userName;
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped>
.div1 {
  width: 100%;
  float: left;
  height: 90%;
  box-sizing: border-box;
  padding: 9px;
}
.div2 {
  width: 100%;
  float: left;
  height: 10%;
  box-sizing: border-box;
  padding: 9px;
  text-align: center;
}
</style>
